import React, { useEffect, useState } from 'react';
import { Modal, Button, Input, Select, DatePicker, message, Radio, RadioChangeEvent, Checkbox } from 'antd';
import moment from 'moment';
import { ClassRoom, Gender, getGender, getHobbit, Hobbit, Hobbits } from './NewEmployee';

interface Student
{
    id: string;
    name: string;
    classroom: string;
    birthday: string;
    hobbit: string;
    gender: string;
}

const { Option } = Select;
let Temp_Dept = "";
export default function AlertEmployee(props: any)
{
    const [Department, setDepartment] = useState([]);

    const [EmpInfoByID, setEmpInfoByID] = useState<Student[]>([]);

    const onChange = (e: any) =>
    {
        Temp_Dept = e;
        console.log(Temp_Dept);
    };

    const onCancel = () =>
    {
        return props.AlertState[1](false);
    };

    const OnSubmit = () =>
    {
        let form = document.getElementById('EmpInfo') as HTMLFormElement;
        let data = new FormData(form);
        data.append("ClassRoom", Temp_Dept.toString());
        data.append("Hobbit", Hobbits);
        data.append('Gender', Gender);
        if (data.get('EmpName') === "" || data.get('Birthday') === "" || data.get('HireDate') === "") return;
        fetch('http://localhost:3065/updateStudent', {
            method: "POST",
            body: data
        })
            .then(response => response.json())
            .then((data) =>
            {
                props.AlertState[1](false);
                message.success("Alert OK");
            })
            .catch(e => console.error(e));
    };


    useEffect(() =>
    {
        const GetDepartment = (() =>
        {
            try
            {
                fetch(`http://localhost:3065/getStudent?id=${props.GetAlertId[0]}`)
                    .then(response => response.json())
                    // .then(data => setDepartment(data))
                    .then(data => { setEmpInfoByID(data); })
                    .catch(e => console.error(e));
            }
            catch (e)
            {
                console.error(e);
            }
        })();
        // const GetEmpInfo = (() =>
        // {
        //     try
        //     {
        //         fetch("http://localhost/PHP_Pro01/React_Pro01/GetEmpInfoByID.php?emp_id=" + props.GetAlertId[0])
        //             .then(response => response.json())
        //             .then(data => setEmpInfoByID(data))
        //             .catch(e => console.error(e));
        //     }
        //     catch (e)
        //     {
        //         console.error(e);
        //     }
        // })();
    }, [props.AlertState, props.GetAlertId]);
    return (
        <div>
            <Modal
                title="Basic Modal" visible={props.AlertState[0]}
                onCancel={onCancel}
                footer={[
                ]}
            >
                {
                    EmpInfoByID.map((item, index) =>
                    {
                        return (
                            <div key={index}>
                                <form id="EmpInfo">
                                    <Input name="EmpId" size="large" value={item['id']} hidden />
                                    <Input name="EmpName" size="large" autoComplete="off" key={item['name']} defaultValue={item['name']} />
                                    <br />
                                    <br />
                                    <Select
                                        id="department"
                                        onChange={onChange}
                                        style={{ width: 200 }}
                                        placeholder="Select a Department"
                                        size='large'
                                        key={item['id']}
                                        defaultValue={item['classroom']}
                                    >
                                        {
                                            ClassRoom.map((item: any, index: any) =>
                                            {
                                                return (
                                                    <Option value={item['class_name']} key={index}>{item['class_name']}</Option>
                                                );
                                            })
                                        }
                                    </Select>
                                    <br />
                                    <br />
                                    <DatePicker name="Birthday" size="large" key={item['birthday']} defaultValue={moment(item['birthday'], 'YYYY-MM-DD')} />
                                    <br />
                                    <br />
                                    <Radio.Group onChange={getGender} defaultValue={item['gender'].toString()}>
                                        <Radio value="男">男</Radio>
                                        <Radio value="女">女</Radio>
                                    </Radio.Group>
                                    <br />
                                    <br />
                                    <Checkbox.Group>
                                        {Hobbit.map((item, index) =>
                                        {
                                            return (
                                                <Checkbox key={index} value={item.value} onChange={(e) => { getHobbit(e); }}>{item.label}</Checkbox>
                                            );
                                        })}
                                    </Checkbox.Group>
                                    <br />
                                    <br />
                                    <Button key="Cancel" type="primary" style={{ float: "right" }} onClick={() => { OnSubmit(); }}>Submit</Button>
                                    <Button key="Submit" style={{ float: "right", marginRight: "10px" }} onClick={() => { onCancel(); }}>Cancel</Button>
                                </form>
                            </div>

                        );
                    })
                }
            </Modal>
        </div >
    );
}
